<template>
	<div class="marquee">
		<div class="scrolltext">
			<span class="notice">通知</span>
			<div class="winBox">
				<ul class="scroll" id="scroll" :style="{width:width + 'px'}">
					<li v-for="item in msgList" v-html="item"></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return {
				msgList:[],
				time:null,
			}
		},
		created(){
			this.message();
			this.goLeft();
		},
		destroyed(){
			clearInterval(this.time);
		},
		computed:{
			width(){
				return 358 * this.msgList.length;
			}
		},
		methods:{
			message(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/app/message`).then((response) => {
	                console.log(response)
	                let list =response.data;
	                var html='',arr=[];
	                for(var i=0;i<list.length;i++){
	                    var temp=list[i]['template'];
	                    var username=temp.replace("恭喜 %s","恭喜 "+list[i]['username']);
	                    var target=username.replace("了 %s","了 <span style='color:#ff7272;font-size:14px;'>"+list[i]['target']+"</span>")
	                    arr.push(target);
	                }
	                this.msgList = arr;
		  		})
			},
			goLeft(){
				let num = 0;
				this.time=setInterval(() => {
					if (num == -7600) {num = 0;}
		            num -= 1;
		            $(".scroll").css({left: num})
				},20)
			}
		}
	}
</script>

<style scoped>
.scrolltext{font-size:0;padding-bottom: 5px;background: #f3f3f3;}
.scrolltext .notice{display:inline-block;width:40px;height:30px;line-height:30px;vertical-align:middle;text-align:center;color:#ff7272;background: #fff;font-size:14px;}
.scrolltext .winBox{width:-webkit-calc(100% - 40px);width:calc(100% - 40px);height:30px;overflow:hidden;position:relative;background:#fff;display:inline-block;vertical-align:middle}
.scrolltext .scroll{position:absolute;left:0;top:0;height:100%;display:flex;flex-wrap:nowrap;font-size:0;}
.scrolltext .scroll li{display:inline-block;width:358px;line-height:30px;text-align:center;color:#666;font-size:14px;}


</style>
